HoTMetaL tutorial

If you're new to creating web (HTML) documents, you may want to use these short tutorials.

The tutorials cover the following topics:

The basic document: titles, headers, and paragraphs
Character formatting: inline text
Block formatting
Lists: ordered lists, unordered lists, and definition lists
Links and URLs: anchors and images
Forms

The tutorials don't cover each topic exhaustively, but give enough information for you to master a topic with additional details from the next chapter, HTML Quick Reference.

The first tutorial may be used as a `quick start' that shows you how to create a file with HoTMetaL. When you've finished that section, you can continue with the other sections or, if you feel comfortable using or experimenting with HTML, you can skip over the rest of the tutorials and refer to the HTML Quick Reference when you need to find out something about HTML.

Getting started: a basic document

Start up HoTMetaL.

Three toolbars should be visible. If they aren't:

Choose Toolbars... in the View menu.
Turn on all three check boxes.
Click on [Ok].

Now:

Choose Open Template... in the File menu.
Select the file tutor.html in the file chooser.
Click on the [Ok] button.

HoTMetaL opens this template, which you can now edit. Notice that the file name in the document window is Document1: when you open a template, HoTMetaL changes the name so that when you save the document, the original template doesn't get overwritten.

This template contains all the required parts for a valid HTML document (head, title, body) but it doesn't have any content yet.

Move the insertion point inside the TITLE element (that is, just to the right of the <TITLE> start-tag).

The label inside TITLE is not part of the content of the element: it's a prefix that prompts you to enter some text.

Inside the TITLE element, type a title for your sample document.

When you display this document in a browser, the contents of this element will be displayed in the title bar.

The main part of your document is the body, contained in the BODY element.

Move the insertion point to the right of the <BODY> start-tag.

You have many choices of elements to insert. However, it's normal to start your document with a heading. Web documents have six levels of headings, represented by the elements H1 through H6.

An H1 heading should be used for major divisions in your document.

Click on the toolbar button.

Type the following (or some other text of your choice) inside the H1 element:
```
George Orwell
```

Now you're ready to insert some text.

Move the insertion point to the right of the </H1> end-tag.
Click on the (paragraph) toolbar button.
Type some text such as the following:

You can begin smaller subdivisions of the document with lower-level ( H2 through H6) headings. You can skip levels if you want, but your documents will usually look better if you don't.

Move the insertion point to the right of the </P> end-tag.
Click on the toolbar button.
Type the text:
```
Early life and education
```
Move the insertion point to the right of the </H2> end-tag.
Click on the toolbar button.
Type the text:

The document should now look something like this:

Now perhaps you'd like to see what this document will look like when it's published on the Web. But first, save the file:

Click on the toolbar button, choose Save from the File menu, or type Ctrl+S at the keyboard and save the file using the file chooser dialog box that appears.
Now, choose Preview... from the File menu, or type Ctrl+M at the keyboard.

If you have never chosen a browser (such as Mosaic or Netscape) for previewing, you'll get a file chooser dialog box that lets you locate and choose one. Once a browser has been chosen you'll get a dialog box displaying a list of all the browsers you've chosen.

Select a browser from the list and click on the [Preview] button.

The browser is launched, displaying your document.

Note: If you choose the Preview... command again, the browser will be launched a second time. To avoid using up memory by running multiple copies of the browser, you should either dismiss the browser after viewing the file, or, instead of using Preview..., save the file in HoTMetaL and use the browser's `Reload' button to view it again.

See Previewing your file in a browser if you want more information on the Preview... command.

As we suggested at the start of the chapter, you may now wish to skip directly to the HTML Quick Reference, or continue with the tutorial.

Character formatting: adding emphasis to inline text

This section is about formatting inline text-text that's embedded in a paragraph or some other block of text. Formatting blocks is covered in the next section. In an HTML document, you add emphasis to a piece of text by surrounding it with an element. This is similar to the approach of many desktop publishing programs, in which you would, for example, highlight a piece of text and choose a type style (such as bold or italic) from a menu.

In the document you just created, highlight the words `Eric Arthur Blair'.
Click on the toolbar button.

This time, clicking on the toolbar button has surrounded the selection (with <EM> and </EM> tag icons). The text should be formatted in italic (unless someone has changed the styles). In any case, a browser will format it in italic-you can use Preview... to try this out.

Of course, you don't always have to surround the text after you've typed it-you can insert an EM element by clicking on the toolbar button when there's no highlighted text, and then just type the text between the tags.

For more information on character formatting, see the section Character formatting in the HTML Quick Reference.

Formatting blocks of text

There are several elements that you can use to surround parts of your document that require special formatting. For example, suppose you wish to add a block quote to the sample document you created above:

Move the insertion point to the right of the last </P> end-tag.
Click on the toolbar button.

This inserts a BLOCKQUOTE element.

Type the letter `O'.

As soon as you do this, HoTMetaL inserts a P element inside the BLOCKQUOTE. This is because the HTML rules do not allow text directly inside BLOCKQUOTE, but BLOCKQUOTE can contain P elements, which can contain text.

Continue typing the text:

Orwell portrayed his prep school days in
harsh terms in the essay "Such, Such Were the
Joys...". This may have been the result of
interpreting his early experiences in the light
of his later political consciousness.
(B. R. Jones)

Notice that the text is indented slightly to set off the quotation. A browser will display a block quote with similar special formatting.

For more information on block formatting, see the section Block formatting in the HTML Quick Reference.

Lists

You can insert five different types of lists in your document.

Ordered (numbered) lists

Ordered lists are lists with numbered items. You don't have to add the numbers yourself-a browser will add these for you.

Move the insertion point to the right of the </BLOCKQUOTE> end-tag in the sample document.
Insert an H2 element from the toolbar.
Type:
```
Orwell's Four Great Motives for Writing
```
Move the insertion point to the right of the </H2> end-tag.
Click on the (ordered list) toolbar button.

When you do this, HoTMetaL automatically inserts an LI (list item) element inside the OL. With one exception, all lists consist of one or more LIs.

Inside the LI element, type:
```
Sheer egoism
```

This is a convenient place to introduce a useful technique for adding elements: splitting the current element.

Make sure the insertion point is just to the left of the </LI> end-tag.
Type Return or Enter.

HoTMetaL splits the LI element, in effect creating a new, empty LI element after the current one. Splitting an element just before the end-tag is a convenient way of inserting a new element that has the same type as the current element. If you split an element in the middle of the text, everything before the insertion point goes in one element, and everything after goes in the other one. Another way to split an element is to choose Split Element from the Markup menu, or type Ctrl+P at the keyboard.

Inside the new LI, type:
```
Aesthetic enthusiasm
```
Split the current LI element.
Type:
```
Historical impulse
```
Move the insertion point to the right of the last </LI> end-tag.
Type:
```
Political purpose
```

As soon as you start typing, HoTMetaL inserts an LI element, because you can't type directly inside an OL. In general, if you type somewhere that text is not allowed, HoTMetaL will attempt to insert a valid element so that you can continue entering text.

Continue typing.

To see how ordered lists look, you should preview the document:

Save the file.
Choose Preview... from the File menu or type Ctrl+M at the keyboard.

As you can see, the browser has inserted the list numbers automatically.

Unordered lists

An unordered list is one whose items aren't numbered, but instead start with `bullets' of some kind. Actually there are several kinds of unordered lists available to you: here we'll use the most common and general-purpose list element, UL (unordered list). In this section you'll also learn a new markup feature, changing the element type.

Move the insertion point to a position between the <OL> start-tag and the first <LI> start-tag.
Click on the button in the toolbar.

The OL start- and end-tags have changed to UL tags. If you click on a toolbar button, and HoTMetaL can't validly insert an element, it'll try to change the current element to the one you've chosen. (You can also change the element by choosing Change... from the Markup menu, or typing Ctrl+L at the keyboard.)

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

The browser now displays the list items with bullets rather than numbers.

You can nest lists by inserting a UL, OL, etc., inside a list item (LI). Some browsers will change the list bullets for the nested list.

The other unordered list elements are MENU and DIR: see the section List elements in the HTML Quick reference for more information.

Definition lists

A third type of list is the `definition list', or `glossary list', (DL). This list is different from the others because it doesn't consist of list item (LI) elements. Rather, it consists of a series of terms (DT) and definitions (DD). As the name implies, this list is intended to display definitions, though you can use it for any list that requires two-part entries. When a definition list is displayed in a browser, a definition is typically displayed on a separate line from the corresponding term, and indented slightly.

Insert a new P element after the last list.

Type:

Orwell's novel "1984" described the use of a
lexicon called "Newspeak" that was designed to give
the appearance of real content while actually
allowing the authorities to successfully lie and
obfuscate. Some examples:

Click on the (definition list) toolbar button.

Notice that HoTMetaL inserts the DL element just after the paragraph, because lists can't be inserted inside paragraphs.

The valid elements inside a DL are DT (definition term) and DD (definition). Although you're allowed to arrange them however you like, the normal ordering would be to have one DT (or more, if, for example, you are defining several words with the same meaning), followed by one or more DDs.

Click on the (definition term) toolbar button. (If you were to just start typing here, instead of inserting a DT from the toolbar, HoTMetaL would insert the DT for you, because you can't type directly inside a DL. As you become more familiar with the HTML rules, you can take advantage of shortcuts such as this.)
Type:
```
Prolefeed
```
Move the insertion point to the right of the </DT> end-tag.
Click on the (definition) toolbar button.
Type:
```
Mass entertainment
```

Now create two more definitions:

Insert a DT element after the DD.
Type:
```
Goodthink
```
After the DT, insert a DD.
Type:
```
Orthodoxy
```
Insert a DT element after the last DD.
Type:
```
Joycamp
```
After the DT, insert a DD.
Type:
```
Forced-labor camp
```

To see how this list is displayed in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

Notice that the definitions are set off from the terms.

See the section List elements in the HTML quick reference for more information on lists.

Links and URLs

It is normal for HTML documents to contain links to other documents, which can be located anywhere on the WWW. These links are provided by URLs (Uniform Resource Locators), which name the location and filename of a document, and the method (scheme) used to access it.

Anchors

When you want to create `hot text' that someone can click on in a browser and cause a document to be accessed, you should use an `anchor' (A) element.

Move the insertion point just to the left of the </ BODY> end-tag.
Type the text:
```
See also the
```
(HoTMetaL will surround the text with a paragraph.)
Click on the toolbar button. (This is equivalent to choosing the Insert Anchor... command in the Links menu.)

This creates an A element, and brings up the Edit URL dialog box.

Next to the Scheme label in this dialog box there are a text entry box and a pop-up menu that let you choose a scheme, which describes how the file referred to in the URL will be accessed by a web browser. For example, if the document were on a web server, you would choose the scheme http.

Choose the `file' scheme.

You are using this scheme because the file you're going to choose is on your own filesystem.

Click on the [Choose File...] button.

This causes a file selection dialog box to appear.

The file you should choose is located in the directory doc in the HoTMetaL installation directory.

Navigate to that directory and choose the file works.html.

Notice that the file name has been inserted in the text entry box next to the [Choose File...] button. You could have typed the file name there directly, but it's probably more convenient for you to use the file selection dialog box.

Most of the time URLs will also have a host component, specifying the network location of the file that's being pointed to, but in this case you don't need one because the file is on your local system.

Click on the [Ok] button.

The URL that you entered is displayed in the message area in the lower left corner of the HoTMetaL window. If you've chosen Show URLs in the View menu, the URL will also be displayed to the right of the A start-tag in the document window.

The next step is to enter the `hot text', a phrase that the user will click on in the browser to access the file pointed to by the URL.

Inside the A, type the text:
```
bibliography
```

The word `bibliography' is the hot text. In a browser it will be displayed in a different color from surrounding text, and perhaps underlined, to alert the user that it points to another document or location.

To see how this works, you should view the document in a browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.
In the browser, click on the word `bibliography'.

The browser will now display the file works.html.

Links to a specific location

It's possible to make a link to a specific location in the same document or in another document. Then, when you click on an anchor (call it the `source') the browser window will display another anchor (the `target') at the location you've linked to, opening another document if necessary.

Highlight the words `Four Great Motives' in the second H2 element.

This piece of text will be the target anchor.

Click on the toolbar button, or choose Name Target... from the Links menu.

The dialog box that appears lets you assign a name to the target anchor. The browser will use this name to locate the anchor. The first word in the document's selection becomes the default name, but you can enter other text if you wish.

In the Name text entry box, type:
```
Why
```
Click on the [Ok] button.

Notice that the highlighted text is now surrounded by an A element.

You have created the `target' anchor. Now you have to set up the `source' anchor:

Move the insertion point to the left of the first </P> end-tag.
Split the P element.

In the new P element, type:


One of his well-known essays is Why I Write

Highlight the words `Why I Write'.
Click on the (connect link) toolbar button, or choose Connect Link from the Links menu.

The highlighted text is now surrounded by an A element. Notice that the URL displayed in the message area in the lower left corner of the HoTMetaL window reads `#Why'. What HoTMetaL has done is create a source anchor whose URL refers to the name `Why' that you just gave the target anchor.

Now you're ready to see the effect of what you've just done.

Save the file.
Choose Preview... from the File menu, or type Ctrl+S at the keyboard.
If both of the anchors you just created are visible, resize the browser window so that you can see only the first one.
In the browser, click on the words `Why I Write'.

The browser window will now scroll so that the location of the target anchor is visible.

You can also use these commands to create a link from one document to a specific location in another document. Once you create the target anchor, HoTMetaL remembers the name you gave it and the document it's in, and the next time you perform a `connect link' operation, it creates a source anchor that refers to that target anchor.

See the chapter URLs for more information.

Images

Web documents often include graphical images. Images are inserted in a document using an IMG element.

Click on the View menu.
If the menu contains the command Show Inline Images, choose this command. If it contains the command Hide Inline Images, do nothing.
Move the insertion point to a position just to the right of the </ H1> end-tag.
Click on the toolbar button.

This inserts an IMG element, and brings up the Edit Image dialog box.

Click on the [Edit...] button.

This gives you the Edit Image Source dialog box, which is similar (but not identical) to the Edit URL dialog box. In this dialog, you will construct a URL for the image.

Choose the `file' scheme.
Click on the [Choose File...] button.
Navigate to the directory doc in the HoTMetaL installation directory.
Choose the file author.gif.
Click on the [Ok] in the Edit Image Source dialog box.
In the Alternate Text text entry box in the Edit Image dialog, type:
```
Anonymous
```

This provides text that a browser will display if it doesn't have the ability to display images.

Click on the [Ok] button in the Edit Image dialog box.

When you do this, a graphical image will be displayed inline, in the HoTMetaL document window. (This is not really George Orwell, but another writer whose work you know if you're reading this manual.)

The inline image will be displayed in the browser, too.

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

For more information on images, see the chapter Working with images.

Forms

There are certain elements that a browser will display as graphical objects, such as text entry boxes or option menus, that can accept input from a user. A `form' in an HTML document is a set of such elements that lets the user enter some information and then call a program, located on a web server, that processes the information. For example, you could create a form that lets a user order a product that you're selling: you can set up the form so that when the user clicks on a `submit' button, the order is sent to your order-processing program.

To implement this, you have to:

Create the form(s).
Install on your server the program that will process the form's data.

The second of these two steps is beyond the scope of HoTMetaL. You will have to obtain supplementary documentation that explains this mechanism, which is known as CGI (Common Gateway Interface). If you open the file faq.html in the HoTMetaL directory you will find a reference to a document on this topic.

This tutorial explains how properly to set up a sample form.

We suggest that for this exercise you create a new HTML document.

Choose Open Template... from the File menu.
Open the file tutor.html in the templates directory.
Now insert an H1 element inside the BODY and type:
```
Buy my book!
```

Insert a P element after the H1, and type:

Just click on the "Submit" button in the form below
to order any or all of these best-sellers at a
fraction of the regular cost!

Actions

Now you're ready to start constructing a form.

Click on the button to insert a FORM element after the P element.

This element encloses everything else in the form. For the remainder of this exercise, make sure that you're working inside the FORM element.

Notice that the button is one that is associated with a group of associated elements. All of the form-related elements that you'll use in this tutorial can be entered using this button.

Choose Edit URL... from the Links menu.

The URL you'll create is referred to as the form's `action'.

From the Scheme option menu. choose `http'.
In the Host text entry box, type:
```
www.sq.com
```
In the Path text entry box, type:
```
cgi-bin/quagmire
```
Click on the [Ok] button.

The `action' you've just specified refers to a program, located on SoftQuad's Web server, that can process the data entered in the form. At the end of the tutorial, you can submit the form to this program. Normally you would specify a program on your own server, though in fact you can specify programs located anywhere on the Web.

Choose the Edit SGML Attributes... command from the Markup menu, or type Ctrl+] at the keyboard.

This brings up a dialog box that lets you edit the attributes of the current element.

Set the attribute called METHOD to the value `GET' (it may have that value already).
Click on the [Apply] button.

Creating a text entry box

Now you'll enter the first element that generates a graphical object in the browser:

Make sure the insertion point is inside the FORM element.
Enter a P element and type:
```
Name: 
```
Click on the toolbar button with the right, keeping the mouse button pressed down.

This displays a menu of form-related elements.

Using the right or left mouse button, click on the INPUT element in the menu.

You can now preview the file to see what this looks like in a browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

Notice that the browser has placed a text entry box next to the word `Name:'.

You're not done with this INPUT element yet.

Move the insertion point inside the INPUT element.
Choose the Edit SGML Attributes... command from the Markup menu, or type Ctrl+] at the keyboard.

This brings up a dialog box that lets you edit the attributes of the current element.

In the text entry box for the attribute NAME, type:
```
cust-name
```

This value is used when the browser sends the form's data to the server, in order to identify which text entry box, option menu, etc., a particular piece of data came from.

Another attribute, SIZE, is used if you want to specify the text entry box's length in characters.
If you enter some text for the VALUE attribute, this text will be displayed in the text entry box by default.

Note: Important attributes (name, type, value) of form elements will be displayed in a prefix, just after the start-tag.

Entering several lines of text

A text entry box in a form lets you enter just one line of text. If you need to let your users enter several lines of text at once (to enter an address, for example), you should use the TEXTAREA element.

Insert a new P element and type:
```
Address:
```
Click on the button with the right mouse button to get the menu of elements, and choose TEXTAREA.
Choose the Edit SGML Attributes... command from the Markup menu, or type Ctrl+] at the keyboard.
Enter the following values for three of this element's attributes:
- NAME: cust_addr
- ROWS: 5
- COLS: 40
ROWS and COLS specify the dimensions of the widget: 5 lines deep and 40 characters wide.
Click on the [Apply] button.

Note: If you want a TEXTAREA to contain some default text, enter it between the start- and end-tags.

Now you may want to see how the browser renders this object:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

The browser generates a multi-line field, which may also have scroll bars.

Presenting a list of choices

Sometimes you will want the user to make one choice from a list of choices. In this example you'll see how to represent this with an option menu.

Insert a new P element, and type:
```
Credit Card:
```
Click on the button with the right mouse button to get the menu of elements.
Insert a SELECT element.

HoTMetaL also inserts an OPTION element automatically.

Put the insertion point directly after the <SELECT> start-tag.
Choose the Edit SGML Attributes... command from the Markup menu, or type Ctrl+] at the keyboard.
Enter `card-name' for the NAME attribute, and `1' for the SIZE attribute.
Click on the [Apply] button.
Move the insertion point inside the OPTION element, and type:
```
Visa
```

The OPTION element represents one choice in the pop-up menu. The text that you typed inside the element is a label that will appear in the menu.

Move the insertion point to the right of the </OPTION> end-tag.
Click on the button with the right mouse button to get the menu of elements.
Insert an OPTION element.
Inside the OPTION element, type:
```
MasterCard
```
Move the insertion point to the right of the second </OPTION> end-tag.

Because OPTION was the last element you inserted with the button, single-clicking quickly on that button with the left mouse button will insert another OPTION element.

Single-click on the button.
Inside the OPTION element, type:
```
Amex
```

To see what this looks like in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.
In the browser, click on the pop-up menu.

Notice that the text you typed inside each of the OPTION elements appears as labels in the option menu.

When the form is submitted, the `value' associated with this menu, which the browser sends to the server, will be the label of the item that was chosen. You can override this by setting values for the VALUE attributes of the OPTION elements.

If you wanted, you could have represented this list of choices as a scrollable list rather than an option menu.To do this, you would set the SIZE attribute of SELECT to 2 or greater; this value specifies how many list items are shown at a time.
If you want to be able to choose more than one item from this kind of list, set the MULTIPLE attribute to `MULTIPLE'.

Just to complete this section of the form:

Insert a new P element after the last one, and type:
```
Card number
```
Insert an INPUT element.
Choose Edit SGML Attributes... from the Markup menu, or type Ctrl+] at the keyboard.
Set the NAME attribute to `card-num'.
Click on the [Apply] button.

Check buttons

So far you have used the INPUT element only to represent text entry boxes. Actually, this element can be used for a variety of purposes. One of these is representing check buttons: you would create this kind of box if you wanted the user to make a `yes/no' choice. (These are different from radio buttons which you would use if you want the user to make one choice from a group of choices.)

Insert a new P element after the last one, and type:
```
Check one or more titles:
```
Insert a new P element after the last one, and type:
```
The Dentistry of Frederic Chopin
```
Insert an INPUT element.
Choose Edit SGML Attributes... from the Markup menu, or type Ctrl+] at the keyboard.
Set the TYPE attribute to ` CHECKBOX'. (This attribute value tells the browser to display a check button.)
Set the NAME attribute to `chopin'.
Click on the [Apply] button.

Now add two more titles in the same way:

Insert a new P element after the last one, and type:
```
Motors and Such by Eddy Schneider
```
Insert an INPUT element.
Set the TYPE attribute to ` CHECKBOX' and the NAME attribute to `motors'.
Insert a new P element after the last one, and type:
```
HTML for Travellers
```
Insert an INPUT element.
Set the TYPE attribute to ` CHECKBOX' and the NAME attribute to `html'.

To see what this looks like in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

Try clicking on the buttons with the mouse. You can turn on all, any, or none of the buttons.

If you set the CHECKED attribute of any of the INPUT elements to `CHECKED', the corresponding check button will be turned on by default when the form is displayed in a browser. (You can have more than one button turned on by default.)
When the form is submitted, the default value associated with turned-on check buttons is the word `on' (turned-off check buttons are not submitted to the server). If you want to override this default, supply values for the VALUE attributes of the INPUT elements.

Radio buttons

As we said above, you can also use the INPUT element to represent radio buttons. A group of radio buttons lets the user make one (and only one) choice from a group of choices.

Insert a new paragraph after the last one and type:
```
Preferred language:
```
Insert a new paragraph after the last one.
Insert an INPUT element.
Choose Edit SGML Attributes... from the Markup menu, or type Ctrl+] at the keyboard.
Set the following attribute values:
- NAME: language
- VALUE: english
- TYPE: RADIO
- CHECKED: CHECKED
Move the insertion point to the right of the </INPUT> end-tag and type:
```
English
```

Now add two more choices in the same way (keep all three choices in the same paragraph):

Insert an INPUT element.
Set the following attribute values:
- NAME: language
- VALUE: french
- TYPE: RADIO
Move the insertion point to the right of the </INPUT> end-tag and type:
```
French
```
Insert an INPUT element.
Set the following attribute values:
- NAME: language
- VALUE: spanish
- TYPE: RADIO
Move the insertion point to the right of the </INPUT> end-tag and type:
```
Spanish
```

Notice the following about the attribute values you've just entered:

Each TYPE attribute is set to `RADIO'. This tells the browser to display a radio button.
Each NAME attribute has the same value, in this case, `language'. This puts all three radio buttons in the same group, which means that the browser will allow only one of these three to be checked at once. If the form contains another group of radio buttons, the NAME attributes for all of its members must be identical, but they can't be the same as the name you used for the radio buttons you just created.
The value of the VALUE attribute is sent to the server if the corresponding button is turned on when you submit the form, thus telling the server which button in this group was turned on.
The first INPUT element in this group has the CHECKED attribute set to ` CHECKED'. This tells the browser that this button should be turned on by default when the form is first displayed.

To see what this looks like in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.

Try clicking on the buttons with the mouse. You can turn on only one of the radio buttons at a time. The button labeled `English' is initially turned on by default.

Reset

You can use the INPUT element to generate a button that restores all the form's controls (text entry boxes, radio buttons, etc.) to their default values:

Insert a new P element after the last one.
Insert an INPUT element.
Choose Edit SGML Attributes... from the Markup menu, or type Ctrl+] at the keyboard.
Set the following attribute values:
- TYPE: RESET
- VALUE: `Reset defaults'

To see what this looks like in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.
Enter some data in the form.
Click on the [Reset defaults] button in the form.

The form's controls revert to their default values. The text entry boxes are all blank and the check boxes are turned off. The radio button labeled `English' is turned on.

Submitting the form

Your form is almost complete. All you need to do is create a button that causes the browser to submit the form.

Next to the INPUT element for the reset button, insert another INPUT element.
Choose Edit SGML Attributes... from the Markup menu, or type Ctrl+] at the keyboard.
Set the following attribute values:
- TYPE: SUBMIT
- VALUE: `Submit order'

To see what this looks like in the browser:

Save the file.
Choose Preview... from the File menu, or type Ctrl+M at the keyboard.
Enter some data in the form. (Don't enter a real credit card number.)
Click on the [Submit order] button in the form.

The form will now be submitted to a program on SoftQuad's web server. This program doesn't actually process an order, it just echoes back the information that the browser sent it. This information will appear in the browser window: you can return to the form by clicking on the button that takes you to the previous document.

The information is presented in pairs containing a `name' (corresponding to the NAME attribute of the text entry box, check box, etc.) and a `value' (for text entry boxes or `text areas', this will be the data you typed in; for check boxes the value `on' is submitted-check boxes that aren't turned on are ignored; for radio buttons the value of the VALUE attribute is sent). You may notice a couple of unusual things about the format of the text: spaces are replaced by a `+' sign, and some special characters (notably newline, `=', and `&') are replaced by `%nn', where the n's are digits from 0-9 and/or letters between `A' and `F'. This is the standard form that browsers use for submitting data to the server.